<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 设置</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>

    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="profile.html"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">设置</div>
      <div class="nav-right"></div>
    </div>

    <!-- 应用内容 -->
    <div class="app-content">
      <!-- 账号设置 -->
      <div class="card mx-4 mt-4">
        <div class="card-header">
          <span>账号设置</span>
        </div>
        <div class="card-body p-0">
          <a href="#" class="list-item">
            <div class="flex items-center">
              <i class="fas fa-user-circle text-blue-500 mr-3"></i>
              <span>个人信息</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </a>
          <a href="#" class="list-item">
            <div class="flex items-center">
              <i class="fas fa-key text-blue-500 mr-3"></i>
              <span>修改密码</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </a>
          <a href="#" class="list-item">
            <div class="flex items-center">
              <i class="fas fa-id-card text-blue-500 mr-3"></i>
              <span>实名认证</span>
            </div>
            <div class="flex items-center">
              <span class="text-green-500 text-sm mr-2">已认证</span>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
          </a>
        </div>
      </div>

      <!-- 消息通知 -->
      <div class="card mx-4 mt-4">
        <div class="card-header">
          <span>消息通知</span>
        </div>
        <div class="card-body p-0">
          <div class="list-item">
            <div class="flex items-center">
              <i class="fas fa-bell text-orange-500 mr-3"></i>
              <span>系统通知</span>
            </div>
            <div class="relative inline-block w-10 mr-2 align-middle select-none">
              <input type="checkbox" id="system-notification" checked class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
              <label for="system-notification" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
            </div>
          </div>
          <div class="list-item">
            <div class="flex items-center">
              <i class="fas fa-envelope text-orange-500 mr-3"></i>
              <span>审批提醒</span>
            </div>
            <div class="relative inline-block w-10 mr-2 align-middle select-none">
              <input type="checkbox" id="approval-notification" checked class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
              <label for="approval-notification" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
            </div>
          </div>
          <div class="list-item">
            <div class="flex items-center">
              <i class="fas fa-comment-dots text-orange-500 mr-3"></i>
              <span>消息提示音</span>
            </div>
            <div class="relative inline-block w-10 mr-2 align-middle select-none">
              <input type="checkbox" id="message-sound" checked class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
              <label for="message-sound" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
            </div>
          </div>
        </div>
      </div>

      <!-- 隐私与安全 -->
      <div class="card mx-4 mt-4">
        <div class="card-header">
          <span>隐私与安全</span>
        </div>
        <div class="card-body p-0">
          <div class="list-item">
            <div class="flex items-center">
              <i class="fas fa-fingerprint text-green-500 mr-3"></i>
              <span>指纹登录</span>
            </div>
            <div class="relative inline-block w-10 mr-2 align-middle select-none">
              <input type="checkbox" id="fingerprint-login" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
              <label for="fingerprint-login" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
            </div>
          </div>
          <div class="list-item">
            <div class="flex items-center">
              <i class="fas fa-user-shield text-green-500 mr-3"></i>
              <span>面容登录</span>
            </div>
            <div class="relative inline-block w-10 mr-2 align-middle select-none">
              <input type="checkbox" id="face-login" checked class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
              <label for="face-login" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
            </div>
          </div>
          <a href="#" class="list-item">
            <div class="flex items-center">
              <i class="fas fa-shield-alt text-green-500 mr-3"></i>
              <span>隐私政策</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </a>
        </div>
      </div>

      <!-- 通用设置 -->
      <div class="card mx-4 mt-4">
        <div class="card-header">
          <span>通用设置</span>
        </div>
        <div class="card-body p-0">
          <a href="#" class="list-item">
            <div class="flex items-center">
              <i class="fas fa-language text-purple-500 mr-3"></i>
              <span>语言</span>
            </div>
            <div class="flex items-center">
              <span class="text-gray-500 text-sm mr-2">简体中文</span>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
          </a>
          <a href="#" class="list-item">
            <div class="flex items-center">
              <i class="fas fa-font text-purple-500 mr-3"></i>
              <span>字体大小</span>
            </div>
            <div class="flex items-center">
              <span class="text-gray-500 text-sm mr-2">标准</span>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
          </a>
          <div class="list-item">
            <div class="flex items-center">
              <i class="fas fa-moon text-purple-500 mr-3"></i>
              <span>深色模式</span>
            </div>
            <div class="relative inline-block w-10 mr-2 align-middle select-none">
              <input type="checkbox" id="dark-mode" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
              <label for="dark-mode" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
            </div>
          </div>
          <a href="#" class="list-item">
            <div class="flex items-center">
              <i class="fas fa-database text-purple-500 mr-3"></i>
              <span>清除缓存</span>
            </div>
            <div class="flex items-center">
              <span class="text-gray-500 text-sm mr-2">23.5MB</span>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
          </a>
        </div>
      </div>

      <!-- 其他选项 -->
      <div class="card mx-4 mt-4 mb-4">
        <div class="card-body p-0">
          <a href="help.html" class="list-item">
            <div class="flex items-center">
              <i class="fas fa-question-circle text-blue-500 mr-3"></i>
              <span>帮助与反馈</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </a>
          <a href="about.html" class="list-item">
            <div class="flex items-center">
              <i class="fas fa-info-circle text-blue-500 mr-3"></i>
              <span>关于我们</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </a>
          <a href="#" class="list-item">
            <div class="flex items-center">
              <i class="fas fa-sign-out-alt text-red-500 mr-3"></i>
              <span class="text-red-500">退出登录</span>
            </div>
          </a>
        </div>
      </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="tab-bar">
      <a href="home.html" class="tab-item">
        <i class="fas fa-home tab-icon"></i>
        <span>首页</span>
      </a>
      <a href="asset.html" class="tab-item">
        <i class="fas fa-laptop tab-icon"></i>
        <span>资产</span>
      </a>
      <a href="finance.html" class="tab-item">
        <i class="fas fa-wallet tab-icon"></i>
        <span>财务</span>
      </a>
      <a href="material.html" class="tab-item">
        <i class="fas fa-box tab-icon"></i>
        <span>物资</span>
      </a>
      <a href="profile.html" class="tab-item active">
        <i class="fas fa-user tab-icon"></i>
        <span>我的</span>
      </a>
    </div>
  </div>

  <style>
    .toggle-checkbox:checked {
      right: 0;
      border-color: #1890ff;
    }
    .toggle-checkbox:checked + .toggle-label {
      background-color: #1890ff;
    }
  </style>
</body>
</html> 